<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>运营监控</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/monitor' }"
        >监控中心</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="order-page">
      <div class="flex-a">
        <span class="title"> 设备在线时长 </span>
        <div class="top-tabs">
          <div
            v-for="item in tabsList"
            :key="item.index"
            :class="activeIndex === item.index ? 'activity-item' : ''"
            class="tabs-item"
            @click="cutTabs(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <span class="tip"> 提示： 在线时长数据从2023年11月10号开始统计 </span>
      </div>
      <div>
        <div class="choice-list">
          <div class="choice-item">
            <div class="choice-title">时间</div>
            <el-date-picker
              v-model="formInline.detailTime"
              type="date"
              placeholder="请选择时间"
              :suffix-icon="CaretBottom"
            />
          </div>
          <div class="choice-item">
            <div class="choice-title">场景</div>
            <el-select v-model="formInline.seachScene" placeholder="请选择场景">
              <el-option
                v-for="i in sceneOptions"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </div>
          <div class="choice-item">
            <div class="choice-title">区</div>
            <el-select
              v-model="formInline.seachDistinguish"
              placeholder="请选择区"
            >
              <el-option
                v-for="i in distinguishOptions"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </div>
          <div class="choice-item">
            <div class="choice-title">商圈</div>
            <el-select
              v-model="formInline.seachBusiness"
              placeholder="请选择商圈"
            >
              <el-option
                v-for="i in businessOptions"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </div>
        </div>
        <div class="btn-box">
          <div class="choice-btn">
            <el-button round :icon="Search" color="#0071bb">查询</el-button>
            <el-button round :icon="RefreshLeft">重置</el-button>
            <el-button round :icon="Refresh">刷新</el-button>
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button round :icon="HelpFilled" style="margin-left: 10px"
                  >筛选</el-button
                >
              </span>
              <template #dropdown>
                <el-dropdown-menu style="max-height: 300px">
                  <el-dropdown-item
                    v-for="(item, index) in checkArrTime"
                    :key="index"
                    @click.stop="filterTableTime(item)"
                  >
                    <el-checkbox
                      v-model="item.show"
                      size="large"
                      :label="item.label"
                    />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="tables">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              v-for="(item, index) in headerArrTime"
              :key="index"
            >
              <template #default="scope">
                <div v-if="item.prop == 'status'">
                  <div class="offline" v-if="scope.row.type == 2">离线</div>
                  <div class="online" v-else>在线</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page_number">
          <el-pagination
            v-model:current-page="currentPageTime"
            v-model:page-size="pageSizeTime"
            :size="sizeTime"
            :disabled="disabledTime"
            layout="prev, pager, next, jumper,total"
            :total="10"
            @size-change="TimeSizeChange"
            @current-change="TimeChange"
          />
        </div>
      </div>
    </div>
    <div class="order-page">
      <div class="flex-a">
        <span class="title"> 补货监控 </span>
        <div class="top-tabs">
          <div
            v-for="item in tabsList"
            :key="item.index"
            :class="activeIndex2 === item.index ? 'activity-item' : ''"
            class="tabs-item"
            @click="cutTabsCpfr(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>
        <div class="choice-list">
          <div class="choice-item">
            <div class="choice-title">设备名称</div>
            <el-input
              v-model="formData.deviceName"
              placeholder="请输入设备名称"
            />
          </div>
          <div class="choice-item">
            <div class="choice-title">线路</div>
            <el-select v-model="formData.seachLine" placeholder="请选择场景">
              <el-option
                v-for="i in lineOptions"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </div>
          <div class="choice-item">
            <div class="choice-title">补货员</div>
            <el-select
              v-model="formData.seachReplenishmanh"
              placeholder="请选择补货员"
            >
              <el-option
                v-for="i in ReplenishmanOptions"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </div>
          <div class="choice-btn">
            <el-button round :icon="Search" color="#0071bb">查询</el-button>
            <el-button round :icon="RefreshLeft">重置</el-button>
            <el-button round :icon="Refresh">刷新</el-button>
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button round :icon="HelpFilled" style="margin-left: 10px"
                  >筛选</el-button
                >
              </span>
              <template #dropdown>
                <el-dropdown-menu style="max-height: 300px">
                  <el-dropdown-item
                    v-for="(item, index) in checkArr"
                    :key="index"
                    @click.stop="filterTableData(item)"
                  >
                    <el-checkbox
                      v-model="item.show"
                      size="large"
                      :label="item.label"
                    />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="tables">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              v-for="(item, index) in headerArr"
              :key="index"
            >
              <template #default="scope">
                <div v-if="item.prop == 'status'">
                  <div class="offline" v-if="scope.row.type == 2">缺货</div>
                  <div v-else></div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page_number">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :size="size"
            :disabled="disabled"
            layout="prev, pager, next, jumper,total"
            :total="10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  CaretBottom,
  Refresh,
  HelpFilled,
  Search,
  RefreshLeft,
} from "@element-plus/icons-vue";
import type { ComponentSize } from "element-plus";
// 顶部收索
const formInline = ref({
  detailTime: "",
  seachScene: "",
  seachDistinguish: "",
  seachBusiness: "",
});
const sceneOptions = ref([
  {
    label: "场景1",
    value: 1,
  },
  {
    label: "场景2",
    value: 0,
  },
]);
const distinguishOptions = ref([
  {
    label: "区1",
    value: 1,
  },
  {
    label: "区2",
    value: 0,
  },
]);
const businessOptions = ref([
  {
    label: "商圈1",
    value: 1,
  },
  {
    label: "商圈2",
    value: 0,
  },
]);

// 补货监控搜索
const formData = ref({
  seachLine: "",
  seachReplenishmanh: "",
  deviceName: "",
});
const lineOptions = ref([
  {
    label: "线路1",
    value: 1,
  },
  {
    label: "线路2",
    value: 0,
  },
]);
const ReplenishmanOptions = ref([
  {
    label: "补货员1",
    value: 1,
  },
  {
    label: "补货员2",
    value: 0,
  },
]);

interface tabsList {
  name: string;
  index: string;
}
// 两个tab切换
const activeIndex = ref("1");
const activeIndex2 = ref("1");
const tabsList = ref<tabsList[]>([
  {
    name: "零柜售",
    index: "1",
  },
  {
    name: "提货柜",
    index: "2",
  },
]);
const cutTabs = (tabItem: tabsList) => {
  activeIndex.value = tabItem.index;
};
const cutTabsCpfr = (tabItem: tabsList) => {
  activeIndex2.value = tabItem.index;
};
// 设备在线时长分页
const currentPageTime = ref(1);
const pageSizeTime = ref(1);
const sizeTime = ref<ComponentSize>("small");
const disabledTime = ref(false);
const TimeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const TimeSizeChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 分页
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>("small");
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const tableData = [
  {
    id: "1",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "微信",
    order_num: "87434893841",
    order_type: "等待支付",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "1",
  },
  {
    id: "2",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "支付成功",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "2",
  },
  {
    id: "3",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "交易关闭",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "3",
  },
];
// 筛选1
// 列表选中的属性
const checkArrTime = ref<any>([
  { label: "设备名称", prop: "name", show: true },
  { label: "设备IMEI号", prop: "imei", show: true },
  {
    label: "场景",
    prop: "close_time",
    show: true,
  },
  {
    label: "地理位置",
    prop: "pay_time",
    show: true,
  },
  { label: "当前状态", prop: "status", show: true },
  { label: "在线时长", prop: "name", show: true },
  { label: "离线时长", prop: "imei", show: true },
  { label: "在线率", prop: "tell", show: true },
]);
const headerArrTime = ref<any>([
  { label: "设备名称", prop: "name", show: true },
  { label: "设备IMEI号", prop: "imei", show: true },
  {
    label: "场景",
    prop: "close_time",
    show: true,
  },
  {
    label: "地理位置",
    prop: "pay_time",
    show: true,
  },
  { label: "当前状态", prop: "status", show: true },
  { label: "在线时长", prop: "name", show: true },
  { label: "离线时长", prop: "imei", show: true },
  { label: "在线率", prop: "tell", show: true },
]);
const filterTableTime = (item: any) => {
  setTimeout(() => {
    headerArrTime.value = checkArrTime.value.filter(
      (item: any) => item.show == true
    );
  }, 500);
};
const checkArr = ref<any>([
  { label: "设备名称", prop: "name", show: true },
  { label: "设备IMEI号", prop: "imei", show: true },
  {
    label: "补货员",
    prop: "close_time",
    show: true,
  },
  {
    label: "线路",
    prop: "pay_time",
    show: true,
  },
  { label: "缺货报警", prop: "status", show: true },
  {
    label: "实时设备库存",
    prop: "pay_method",
    show: true,
  },
  { label: "预警缺货率", prop: "order_num", show: true },

  { label: "实时缺货率", prop: "btn", show: true },
  { label: "实时缺货数量", prop: "name", show: true },
  { label: "预警断货数", prop: "imei", show: true },
  { label: "实时断货数", prop: "tell", show: true },
]);
const headerArr = ref<any>([
  { label: "设备名称", prop: "name", show: true },
  { label: "设备IMEI号", prop: "imei", show: true },
  {
    label: "补货员",
    prop: "close_time",
    show: true,
  },
  {
    label: "线路",
    prop: "pay_time",
    show: true,
  },
  { label: "缺货报警", prop: "status", show: true },
  {
    label: "实时设备库存",
    prop: "pay_method",
    show: true,
  },
  { label: "预警缺货率", prop: "order_num", show: true },

  { label: "实时缺货率", prop: "btn", show: true },
  { label: "实时缺货数量", prop: "name", show: true },
  { label: "预警断货数", prop: "imei", show: true },
  { label: "实时断货数", prop: "tell", show: true },
]);
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true);
  }, 500);
};
</script>
<style lang="scss">
.pop-table .el-table__header th {
  display: none !important;
}

.pop-table .el-table__body td div {
  color: #333;
  font-weight: 600;
}
</style>
<style lang="scss" scoped>
.pop-table {
  .cont {
    color: #666;
    font-weight: 400;
  }
}

.info-title {
  font-size: 14px;
  margin-top: -20px;
  font-weight: bold;
  color: #000;
}

.from-title {
  font-size: 14px;
  padding: 10px;
  color: #000;
  font-weight: bold;
}

.goods_img {
  width: 30px;
  height: 50px;
}

.order-page {
  background-color: #fff;
  margin-top: 20px;
  padding: 10px;
  .flex-a {
    display: flex;
    align-items: center;
    justify-content: start;
    .title {
      font-size: 16px;
      color: #000;
    }
    .tip {
      color: #0000ff;
      font-size: 12px;
    }
  }

  .top-tabs {
    text-align: center;
    display: flex;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;

    .tabs-item {
      width: 150px;
      padding: 5px;
      background-color: #fff;
      border: 1px solid #d2d2d2;
      border-radius: 20px;
      margin-right: 15px;
    }

    .activity-item {
      background-color: #f0a93e;
      border: 1px solid #f0a93e;
      color: #fff;
    }

    .tabs-item:hover {
      cursor: pointer;
    }
  }

  .choice-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;

    .choice-item {
      width: 25%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .choice-title {
        font-size: 12px;
        width: 80px;
        text-align: center;
      }

      .rounded-input {
        width: 250px;
      }
    }
  }

  .btn-box {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-left: 20px;
  }

  .page_number {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
  }

  .tables {
    margin-top: 10px;

    .online {
      background: #0071bb;
      color: #fff;
      width: 60px;
      text-align: center;
    }

    .offline {
      background: red;
      color: #fff;
      width: 60px;
      text-align: center;
    }

    .check-text {
      color: #0071bb;
      cursor: pointer;
    }
  }
}
:deep() {
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
}
</style>
